<template>
	<div class="header">
		<div class="header-left">
			<img class="gh" src="@/static/images/gh.png" alt="" />
			<div class="header-left-title">
				<!-- <img class="gajg" src="@/static/images/gajg.png" alt="" />
				<img class="theme" src="@/static/images/theme.png" alt="" /> -->
				<p class="myfont">萧山区公安分局</p>
				<p class="myfont">{{model.item.competitionName}}</p>
			</div>
		</div>
		<User class="header-right" />
	</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapState } from 'vuex';
import User from './User.vue';
export default Vue.extend({
	name: 'MyHeader',
	components: {
		User
	},
	computed: {
		...mapState({
			model: (state: any) => state.model
		})
	}
});
</script>

<style lang="less" scoped>
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	&-left {
		display: flex;
		align-items: center;
		padding: 45px 0 57px 0;
		.gh {
			width: 62px;
			height: 63px;
			margin: 0 20px 0 30px;
		}
		&-title {
			display: flex;
			flex-direction: column;
			p {
				color: #f9c980;
			}
			.gajg {
				width: 191px;
				height: 29px;
				margin-bottom: 6px;
			}
			.theme {
				width: 298px;
				height: 29px;
			}
		}
	}
	// &-right {
	// }
}
</style>
